<template>
  <aside class=" col col-xl-4 order-xl-2 col-lg-12 order-lg-1  col-md-12 col-sm-12 col-12">
    <div class="box shadow-sm mb-3 rounded bg-white ads-box text-center overflow-hidden">
      <div class="p-3 border-bottom">
        <h6 class="font-weight-bold text-dark">活动让更多人聚在一起！</h6>
        <p class="mb-0 text-muted">想发布活动?</p>
      </div>
      <div class="p-3">
        <button type="button" class="btn btn-primary pl-4 pr-4" @click="postActivity">发布活动</button>
      </div>
    </div>
    <div class="pb-3">
      <h6 class="font-weight-bold text-dark mb-1">好评活动</h6>
      <!-- <p class="mb-0 text-muted">Designer at Google?</p> -->
    </div>
    <div style="min-height:400px" class="shadow-sm rounded bg-white job-item-2 p-3 mb-3" v-loading ="!LikeStore.o">
      <div class="goodActivity mt-2" v-for="(item,index) in likeList " :key="index">
        <div class="u-avatar mr-3 leftImg">
          <img class="" :src="item.activity_cover" width="100%" alt="Image Description">
        </div>
        <div class="rightInfo">
          <div class="mb-3">
            <div class="myStt">
              <p class="font-weight-bold mb-0 large " >
                <a class="text-dark text-truncate " >{{item.activity_name}}</a>
              </p>
            </div>
            <a class="d-inline-block small pt-1" >
              <el-rate
                disabled
                v-model="item.activity_score"
                :icon-classes="iconClasses"
                void-icon-class="icon-rate-face-off"
                :colors="['#FFC107', '#FFC107', '#FFC107']">
              </el-rate>
              <span class="text-dark font-weight-bold ml-2">{{item.activity_score}}</span>
              <span class="text-muted">({{item.activity_viewNum}} 看过)</span>
            </a>
          </div>
          <div class="d-flex align-items-center">
            <div class="border-right pr-3 mr-3">
              <a style="cursor:pointer" class="text-secondary small" @click="seeInfomation(item.id)">查看详情</a>
            </div>
            <a class="small" @click="intoActivity" href="#">参与活动</a>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      top="5vh"
      :append-to-body="true"
      :destroy-on-close="true"
      custom-class="dialogStyle"
      title="发表活动"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose">
      <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
          class="demo-ruleForm">
          <el-form-item label="活动名称" prop="activityName">
            <el-input v-model="ruleForm.activityName" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="活动性质" prop="activityCharacter">
            <el-select size="mini" v-model="ruleForm.activityCharacter" placeholder="请选择活动性质">
              <el-option label="线上" value="online"></el-option>
              <el-option label="线下" value="outline"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动时间" required prop="activityTime">
            <el-date-picker size="mini"
              v-model="ruleForm.activityTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="活动分类" prop="activityType">
            <el-checkbox-group v-model="ruleForm.activityType">
              <el-checkbox label="游戏" value="game"></el-checkbox>
              <el-checkbox label="电影/音乐" value="musci/movie"></el-checkbox>
              <el-checkbox label="同城活动" value="city"></el-checkbox>
              <el-checkbox label="美食分享" name="food"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="活动地点" prop="activityAddress">
            <div class="myaddress" >
              <locale-selector :size="'mini'" @locale="getLocale" ref="LocaleSelector"></locale-selector>
              <el-input size="mini" placeholder="填写详细地址" v-model="ruleForm.detailAddress"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="参加方式" prop="partyIn">
            <el-input size="mini" placeholder="购票/线上、聊天、组队等多种方式（建议使用本网站联系方式或者购票等应用，否则无法通过审核）" v-model="ruleForm.partyIn"></el-input>
          </el-form-item>
          <el-form-item label="活动介绍" prop="activityDesc">
            <el-input size="mini" type="textarea" v-model="ruleForm.activityDesc"></el-input>
          </el-form-item>
          <el-form-item label="图片封面" prop="base64">
            <el-upload
              :on-change="getFile"
              action="#"
              :file-list="file_list"
              :class="file_list.length >= 1 ? 'a' : ''"
              list-type="picture-card"
              :auto-upload="false">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      </span>
    </el-dialog>
  </aside>
</template>

<script>
import moment from 'moment';
import Bus from '@/components/common/eventBus.js';
import localeSelector from '@/components/common/localeSelector';

export default {
  data() {
    return {
      iconClasses: ['iconfont icon-xingxing', 'iconfont icon-xingxing', 'iconfont icon-xingxing'],
      submintStore: this.newStore(),
      LikeStore: this.newStore(),
      dialogVisible: false,
      likeList: [],
      file_list: [],
      ruleForm: {
        activityName: '',
        activityTime: '',
        activityAddress: [],
        activityType: [],
        activityCharacter: '',
        activityDesc: '',
        base64: '',
        detailAddress: '',
        partyIn: '',
      },
      rules: {
        activityName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
        ],
        activityTime: [
          { required: true, message: '请选择活动时间', trigger: 'change' },
        ],
        activityAddress: [
          {
            type: 'array', required: true, message: '请选择活动地点', trigger: 'change',
          },
        ],
        activityCharacter: [
          {
            required: true, message: '请选择活动性质', trigger: 'change',
          },
        ],
        activityType: [
          {
            type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change',
          },
        ],
        activityDesc: [
          { required: true, message: '请填写活动详情', trigger: 'change' },
        ],
      },
    };
  },
  components: {
    localeSelector,
  },
  created() {
    this.getLikemoreList();
  },
  methods: {
    getLocale(value) {
      this.ruleForm.activityAddress = value;
    },
    postActivity() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.spost(this.submintStore, '/Activity/postSaveActivity', {
            createUserId: this.$store.state.userInfo.userid,
            activityName: this.ruleForm.activityName,
            activityTime: `${this.formatTime(this.ruleForm.activityTime[0])}-${this.formatTime(this.ruleForm.activityTime[1])}`,
            activityAddress: this.ruleForm.activityAddress.toString() + this.ruleForm.detailAddress,
            activityType: this.ruleForm.activityType.toString(),
            activityCharacter: this.ruleForm.activityCharacter,
            activityCover: this.base64,
            activityDecs: this.ruleForm.activityDesc,
            activityInto: this.ruleForm.partyIn,
          }).then((res) => {
            this.$message.success(res.d.msg);
            this.ruleForm.activityName = '';
            this.ruleForm.activityTime = [];
            this.$refs.LocaleSelector.clear();
            this.ruleForm.activityAddress = '';
            this.ruleForm.activityType = [];
            this.ruleForm.activityCharacter = '';
            this.base64 = '';
            this.file_list = [];
            this.ruleForm.detailAddress = '';
            this.ruleForm.partyIn = '';
            this.ruleForm.activityDesc = '';
            this.dialogVisible = false;
          });
        }
        return false;
      });
    },
    formatTime(val) {
      return moment(val).format('YYYY-MM-DD HH:mm:ss');
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getFile(file) {
      this.file_list = [file];
      this.getBase64(file.raw).then((res) => {
        this.base64 = res;
      });
    },
    handleRemove() {
      this.file_list = [];
      this.base64 = '';
    },
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        let imgResult = '';
        reader.readAsDataURL(file);
        reader.onload = () => {
          imgResult = reader.result;
        };
        reader.onerror = (error) => {
          reject(error);
        };
        reader.onloadend = () => {
          resolve(imgResult);
        };
      });
    },
    seeInfomation(id) {
      Bus.$emit('transferId', id);
    },
    getLikemoreList() {
      this.spost(this.LikeStore, 'Activity/getLikemoreList', {}).then((res) => {
        this.likeList = res.d.likeList;
      });
    },
    intoActivity() {
      alert('功能扩展中，请查看详情参与方式');
    },
  },
};
</script>

<style scoped lang="scss">
/deep/.dialogStyle{
  border-radius: 10px
}
/deep/.el-upload--picture-card {
    line-height: 300px;
    height: 50%;
    max-height: 300px;
    width: auto;
    min-width:50%;
 }
  :deep(.el-upload-list__item-actions, ) {
    line-height: 300px;
    height: 50%;
      max-height: 300px;
    width: auto;

  }
  /deep/ .el-upload-list__item {
    line-height: 300px;
    height: 50%;
    max-height: 300px;
    width: auto;
    max-width: 100%;
    min-width: 50%;
    overflow: hidden;
  }
  /deep/ .el-upload-list__item-thumbnail {
    height: 50%;
    width: auto;
    min-width: 50%;
      max-height: 300px;
  }
  .a {
    /deep/ .el-upload--picture-card {
      display: none;
    }
 }
 .myaddress{
   display: flex;
    flex-wrap:wrap;
    align-items:center;
 }
 .goodActivity{
   display: flex;
   box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
   border-radius: 5px;
   .leftImg{
     width: 45%;
     padding: 2%;
   }
   .rightInfo{
      width: 55%;
      padding: 2%;
      .myStt{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
   }
 }
</style>
